<template>
  <m-layout>
    <mt-header slot="header" title="课后点评" >
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body" class="named">
      <div class="calendar">
        <m-calendar-range v-model="calendarRangeValue" :shortcuts="shortcuts" @change="changedate" />
      </div>
      <m-section :border-bottom="false">
        <e-heading>上课班级</e-heading>
        <div class="classes" v-if="classesArr.length">
           <ul class="courseList"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10"
            :infinite-scroll-immediate-check="true"
           >
            <li v-for="(item,index) in classesArr" :key="index" @click="goNext(item)" class="item">
              <p class="info">
                <span>{{item.name}}</span>
                <span v-if="item.schooleName">({{item.schooleName}})</span>
                <span :class="['tag',{'orange':item.properties==0},{'green':item.properties==2},{'yellow':item.properties==1}]">{{item.properties | formatTag}}</span>
              </p>
              <p class="icon">
                <span>{{item.startTime | formatTime}}-{{item.endTime | formatTime}}</span>
                <i class="iconfont">&#xe65e;</i>
              </p>
            </li>
          </ul>
        </div>
        <e-placeholder text="暂无班级" v-else />
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import api from 'api/reviews'
import MCalendarRange from '@/views/components/CalendarRange'
export default {
  components: {
    MCalendarRange
  },
  computed: {
    beginTime () {
      if (!this.calendarRangeValue[0]) {
        return ''
      } else {
        let start = this.calendarRangeValue[0]
        // return `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`
        return new Date(start).format('yyyy-MM-dd')
      }
    },
    endTime () {
      if (!this.calendarRangeValue[1]) {
        return ''
      } else {
        let end = this.calendarRangeValue[1]
        // return `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`
        return new Date(end).format('yyyy-MM-dd')
      }
    }
  },
  data () {
    return {
      calendarRangeValue: [new Date(), new Date()],
      classesArr: [],
      total: '',
      shortcuts: [
        {
          label: '今日',
          value () {
            let now = new Date()
            return [new Date(now.getFullYear(), now.getMonth(), now.getDate()), new Date(now.getFullYear(), now.getMonth(), now.getDate())]
          }
        },
        {
          label: '昨日',
          value () {
            let now = new Date()
            now.setDate(now.getDate() - 1)
            return [new Date(now.getFullYear(), now.getMonth(), now.getDate()), new Date(now.getFullYear(), now.getMonth(), now.getDate())]
          }
        },
        {
          label: '本周',
          value () {
            let now = new Date()
            let day = now.getDay()
            let start = new Date(now.getTime() - 86400000 * (day - 1))
            let end = new Date(now.getTime() + 86400000 * (7 - day))
            return [new Date(start.getFullYear(), start.getMonth(), start.getDate()), new Date(end.getFullYear(), end.getMonth(), end.getDate())]
          }
        },
        {
          label: '上周',
          value () {
            let now = new Date()
            let day = now.getDay()
            let start = new Date(now.getTime() - 86400000 * (day + 6))
            let end = new Date(now.getTime() - 86400000 * day)
            return [new Date(start.getFullYear(), start.getMonth(), start.getDate()), new Date(end.getFullYear(), end.getMonth(), end.getDate())]
          }
        },
        {
          label: '本月',
          value () {
            let now = new Date()
            let year = now.getFullYear()
            let month = now.getMonth()
            return [new Date(year, month, 1), new Date(month === 11 ? year + 1 : year, month === 11 ? 0 : month + 1, 0)]
          }
        },
        {
          label: '上月',
          value () {
            let now = new Date()
            let year = now.getFullYear()
            let month = now.getMonth()
            return [new Date(month === 0 ? year - 1 : year, month === 0 ? 11 : month - 1, 1), new Date(year, month, 0)]
          }
        }
      ],
      rows: 15,
      page: 1,
      loading: false
    }
  },
  filters: {
    formatTag (val) {
      let tag = {
        0: '专',
        2: '次',
        1: '综'
      }
      return tag[val]
    },
    formatTime (val) {
      // const date = new Date(val)
      // let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      // let minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      // return `${hours}:${minute}`
      return val ? new Date(val).format('hh:mm') : ''
    }
  },
  methods: {
    // 修改时间
    changedate () {
      this.classesArr = []
      this.page = 1
      this.classSchedule()
    },
    // 下拉刷新
    loadMore () {
      if (this.classesArr.length >= this.total) {
        this.loading = true
        return false
      }
      this.classSchedule()
    },
    classSchedule () {
      api.classSchedule({
        // orgUserId: 'seedp543381',
        beginTime: this.beginTime,
        endTime: this.endTime,
        page: this.page,
        rows: this.rows
      }).then((res) => {
        this.page += 1
        this.classesArr.push(...res.data.list)
        this.total = res.data.total
      }).catch(() => {})
    },
    goNext (item) {
      this.$router.push({path: '/reviews/student',
        query: {
          teacherId: item.teacherId,
          classScheduleId: item.classScheduleId,
          beginTime: this.beginTime,
          endTime: this.endTime}})
    }
  },
  mounted () {
    this.classSchedule()
  }
}
</script>

<style lang="scss" scoped>
  .calendar{
    text-align: center;
    background-color: #fff;
  }
  .classes{
    position: relative;
    .courseList{
        li{
          padding: 0.16rem 0.2rem;
          position: relative;
          &:after{
            content: " ";
            border-bottom: 1px solid $border-color-base;
            display: block;
            height:0;
            width:100%;
            position: absolute;
            left: 0;
            bottom:0;
            transform: scaleY(0.5);
          }
          .info{
            width: 70%;
            margin: 0;
            padding: 0.16rem 0;
            span{
              margin-right: 0.1rem;
            }
            .tag{
              font-size: $font-size-small;
              padding: 1px 1px 0 1px;
              border: 1px solid #fff;
              border-radius: $border-radius-base;
              &.orange{
                color: $color-warning;
                border-color: $color-warning;
              }
              &.green{
                color: $color-success;
                border-color: $color-success;
              }
              &.yellow{
                color: #89d034;
                border-color: #89d034;
              }
            }
          }
          .icon{
            margin: 0;
            position: absolute;
            top: 0.19rem;
            right: 0.2rem;
            padding: 0.16rem 0;
            color: $color-sub;
          }
        }
    }
  }
</style>
